<!DOCTYPE html>
<html lang="zh-CN" class="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主题切换动画</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        // Tailwind CSS 配置
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        // 定义亮色主题颜色
                        light: {
                            bg: '#ffffff',
                            text: '#333333',
                            primary: '#4285f4',
                            card: '#f5f5f5',
                            border: '#e0e0e0'
                        },
                        // 定义暗色主题颜色
                        dark: {
                            bg: '#1a1a1a',
                            text: '#f0f0f0',
                            primary: '#8ab4f8',
                            card: '#2a2a2a',
                            border: '#444444'
                        }
                    }
                }
            }
        }
    </script>
</head>
<body class="font-sans text-base leading-relaxed p-5 bg-white text-gray-800 transition-colors duration-500 dark:bg-gray-900 dark:text-gray-100">
<div class="max-w-4xl mx-auto p-5">
    <!-- 头部区域 -->
    <header class="flex justify-between items-center mb-8 pb-5 border-b border-gray-200 dark:border-gray-700 transition-colors duration-500">
        <h1 class="text-3xl font-bold text-blue-500 dark:text-blue-300 transition-colors duration-500">主题切换演示</h1>
        <button
                id="themeToggle"
                class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded transition-colors duration-300 dark:bg-blue-300 dark:hover:bg-blue-400 dark:text-gray-900"
        >
            切换暗色主题
        </button>
    </header>

    <!-- 内容卡片 -->
    <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-6 mb-6 shadow-lg border border-gray-200 dark:border-gray-700 transition-all duration-500">
        <h2 class="text-2xl font-semibold mb-4 text-blue-500 dark:text-blue-300 transition-colors duration-500">关于这个演示</h2>
        <p class="mb-3">
            这是一个使用Tailwind CSS和原生JavaScript实现的主题切换示例。
            点击右上角按钮可以在亮色和暗色主题之间切换。
        </p>
        <p>
            注意观察所有元素的颜色是如何同步过渡的，没有卡顿或不同步的情况。
        </p>
    </div>

    <!-- 特性网格 -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8">
        <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-5 shadow border border-gray-200 dark:border-gray-700 transition-all duration-500">
            <h3 class="text-xl font-semibold mb-3 text-blue-500 dark:text-blue-300 transition-colors duration-500">统一过渡</h3>
            <p>所有元素使用Tailwind CSS的dark:变体统一控制过渡</p>
        </div>
        <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-5 shadow border border-gray-200 dark:border-gray-700 transition-all duration-500">
            <h3 class="text-xl font-semibold mb-3 text-blue-500 dark:text-blue-300 transition-colors duration-500">平滑动画</h3>
            <p>使用Tailwind CSS的过渡类实现自然过渡</p>
        </div>
        <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-5 shadow border border-gray-200 dark:border-gray-700 transition-all duration-500">
            <h3 class="text-xl font-semibold mb-3 text-blue-500 dark:text-blue-300 transition-colors duration-500">性能优化</h3>
            <p>最小化重绘和回流，确保动画流畅</p>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const themeToggle = document.getElementById('themeToggle');

        // 检查本地存储中的主题偏好
        const savedTheme = localStorage.getItem('theme');
        const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

        // 设置初始主题
        const initialTheme = savedTheme || (systemPrefersDark ? 'dark' : 'light');
        setTheme(initialTheme, false); // 初始加载不应用动画

        // 监听系统主题变化
        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
            const newTheme = e.matches ? 'dark' : 'light';
            setTheme(newTheme);
        });

        // 按钮点击事件
        themeToggle.addEventListener('click', () => {
            const currentTheme = document.documentElement.classList.contains('dark') ? 'dark' : 'light';
            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
            setTheme(newTheme);
        });

        /**
         * 设置页面主题
         * @param {string} newTheme - 要设置的主题 ('light' 或 'dark')
         * @param {boolean} animate - 是否启用过渡动画（此实现中未使用，保留以保持接口一致）
         */
        function setTheme(newTheme, animate = true) {
            // 更新按钮文本
            themeToggle.textContent = newTheme === 'dark' ? '切换亮色主题' : '切换暗色主题';

            if (newTheme === 'dark') {
                document.documentElement.classList.add('dark');
                localStorage.setItem('theme', 'dark');
            } else {
                document.documentElement.classList.remove('dark');
                localStorage.setItem('theme', 'light');
            }
        }
    });
</script>
</body>
</html>